<template>
  <el-form :model="club" label-width="100px" class="activity-form">
    <el-form-item label="社团编号" required>
      <el-input v-model="club.num" placeholder="请输入社团编号" />
    </el-form-item>

    <el-form-item label="社团名称" required>
      <el-input v-model="club.name" placeholder="请输入社团名称" />
    </el-form-item>

    <!-- <el-form-item label="创建时间" required>
      <el-date-picker
        v-model="club.createTime"
        type="date"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
      />
    </el-form-item> -->

    <el-form-item label="社团简介">
      <QuillEditor
        v-model:content="club.introduce"
        :options="editorOption"
        theme="snow"
        toolbar="full"
        contentType="html"
        class="editor-container"
        @blur="onEditorBlur"
        @focus="onEditorFocus"
        @change="onEditorChange"
      />
    </el-form-item>

    <el-form-item label="社团类型" required>
      <el-select
        v-model="club.clubTypeId"
        placeholder="请选择社团类型"
        class="activity-type-select"
      >
        <el-option
          v-for="clubType in clubTypeList"
          :key="clubType.id"
          :label="clubType.type"
          :value="clubType.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <div class="button-group">
        <el-button type="primary" @click="handleSubmit">
          <el-icon><Plus /></el-icon>
          添加社团
        </el-button>
        <el-button @click="goBack">
          <el-icon><Back /></el-icon>
          返回
        </el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { Plus, Back } from "@element-plus/icons-vue";
import axios from "axios";

const OK = 200;
const router = useRouter();

// 响应式状态
const club = reactive({
  num: "",
  name: "",
  createTime: new Date(),
  introduce: "",
  clubTypeId: "",
});

const clubTypeList = ref([]);
const editorOption = reactive({
  placeholder: "输入社团简介：",
  theme: "snow",
  modules: {
    toolbar: [
      ["bold", "italic", "underline", "strike"],
      ["blockquote", "code-block"],
      [{ header: 1 }, { header: 2 }],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ script: "sub" }, { script: "super" }],
      [{ indent: "-1" }, { indent: "+1" }],
      [{ direction: "rtl" }],
      [{ size: ["small", false, "large", "huge"] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ["clean"],
      ["link", "image"],
    ],
  },
});

// 提交表单
const handleSubmit = async () => {
  try {
    // 表单验证
    if (!club.num?.trim()) {
      ElMessage.warning("请输入社团编号");
      return;
    }
    if (!club.name?.trim()) {
      ElMessage.warning("请输入社团名称");
      return;
    }
    // if (!club.createTime) {
    //   ElMessage.warning("请选择创建时间");
    //   return;
    // }
    if (!club.clubTypeId) {
      ElMessage.warning("请选择社团类型");
      return;
    }

    const res = await axios.post("/api/clubs/", club);
    if (res.data.code === OK) {
      ElMessage.success("添加社团成功");
      setTimeout(() => {
        router.push({ name: "ClubList" });
      }, 1500);
    } else {
      ElMessage.error(res.data.message || "添加社团失败");
    }
  } catch (error) {
    console.error("添加社团失败:", error);
    ElMessage.error("添加社团失败，请重试");
  }
};

// 获取社团类型列表
const getClubTypeList = async () => {
  try {
    const res = await axios.get("/api/clubTypes");
    if (res.data.code === OK) {
      clubTypeList.value = res.data.data;
    } else {
      ElMessage.error(res.data.message || "获取社团类型失败");
    }
  } catch (error) {
    console.error("获取社团类型失败:", error);
    ElMessage.error("获取社团类型失败，请重试");
  }
};

// 编辑器事件
const onEditorBlur = () => {};
const onEditorFocus = () => {};
const onEditorChange = () => {};

// 返回操作
const goBack = () => {
  ElMessageBox.confirm("确定要返回吗？未保存的内容将会丢失", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    router.back();
  });
};

// 初始化加载
onMounted(() => {
  getClubTypeList();
});
</script>

<style scoped>
.activity-form {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.editor-container {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

:deep(.ql-container) {
  min-height: 200px;
}

.button-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.activity-type-select {
  width: 100%;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-button .el-icon) {
  margin-right: 4px;
}
.editor-container.ql-container.ql-snow {
  width: 100%;
  height: 40px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 40px;
  width: 100%;
  border-top: 0px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  width: 100%;
  border-top: 0px;
  height: 40px;
}
</style>
